<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="msapplication-TileColor" content="#0061da">
        <meta name="theme-color" content="#1643a3">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <link rel="icon" th:href="favicon.ico" type="image/x-icon">
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

        <!-- Title -->
        <title>adminor – Clean & Modern Responsive Bootstrap 4 admin dashboard HTML5 Template.</title>

        <link rel="stylesheet" th:href="@{/assets/fonts/fonts/font-awesome.min.css}">

        <!-- Font Family -->
        <link th:href="@{https://fonts.googleapis.com/css?family=Lato:300,400,700,900}" rel="stylesheet">

        <!-- Sidemenu Css -->
        <link th:href="@{/assets/plugins/fullside-menu/css/style.css}" rel="stylesheet">
        <link th:href="@{/assets/plugins/fullside-menu/waves.min.css}" rel="stylesheet">

        <!-- Dashboard Css -->
        <link th:href="@{/assets/css/dashboard.css}" rel="stylesheet">

        <!-- c3.js Charts Plugin -->
        <link th:href="@{/assets/plugins/charts-c3/c3-chart.css}" rel="stylesheet">

        <!-- Custom scroll bar css-->
        <link th:href="@{/assets/plugins/scroll-bar/jquery.mCustomScrollbar.css}" rel="stylesheet">

        <!---Font icons-->
        <link th:href="@{/assets/css/icons.css}" rel="stylesheet">
        <link rel="stylesheet" th:href="@{/assets/plugins/sweet-alert/sweetalert.css}">
        <script th:src="@{/assets/plugins/sweet-alert/sweetalert.min.js}"></script>
        <!-- Dashboard js -->
        <script th:src="@{/assets/js/vendors/jquery-3.2.1.min.js}"></script>
        <script th:src="@{/assets/js/vendors/bootstrap.bundle.min.js}"></script>
        <script th:src="@{/assets/js/vendors/jquery.sparkline.min.js}"></script>
        <script th:src="@{/assets/js/vendors/selectize.min.js}"></script>
        <script th:src="@{/assets/js/vendors/selectize.min.js}"></script>
        <script th:src="@{/assets/js/vendors/circle-progress.min.js}"></script>
        <script th:src="@{/assets/plugins/rating/jquery.rating-stars.js}"></script>

        <!-- Fullside-menu Js-->
        <script th:src="@{/assets/plugins/fullside-menu/jquery.slimscroll.min.js}"></script>
        <script th:src="@{/assets/plugins/fullside-menu/waves.min.js}"></script>

        <!-- Custom scroll bar Js-->
        <script th:src="@{/assets/plugins/scroll-bar/jquery.mCustomScrollbar.concat.min.js}"></script>

        <!-- Custom Js-->
        <script th:src="@{/assets/js/custom.js}"></script>
        <script th:src="@{/assets/js/axios.js}"></script>
        <script th:src="@{/assets/js/md5.js}"></script>
    </head>

    <body>
        <div class="login-img">
            <div id="global-loader"></div>
            <div class="page">
                <div class="page-single">
                    <div class="container ">
                        <div class="row authentication">
                            <div class="col col-login mx-auto">
                                <div class="text-center mb-6">
                                    <img th:src="@{/assets/images/brand/logo.png}" class="h-8" alt="">
                                </div>
                                <form class="card" method="post">
                                    <div class="card-body p-6">
                                        <div class="text-center card-title">忘记密码</div>
                                        <div class="input-icon form-group">
                                            <div class="input-group">
                                                <span class="input-icon-addon search-icon input-group-prepend"
                                                      style="z-index: 100">
                                                    <i class="zmdi zmdi-email"></i>
                                                </span>
                                                <input type="text" class="form-control" placeholder="请输入邮箱"
                                                       id="email" name="email">
                                                <span class="input-group-append">
                                                    <button class="btn btn-primary" type="button"
                                                            id="send-button">发送</button>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="input-icon form-group">
											<span class="input-icon-addon search-icon">
												<i class="ion-chatbubble"></i>
											</span>
                                            <input type="text" class="form-control" placeholder="验证码" id="code"
                                                   name="code">
                                        </div>
                                        <div class="form-footer">
                                            <button type="button" class="btn btn-primary btn-block" id="do-check">验证</button>
                                        </div>
                                        <div class="text-center text-muted mt-3 ">
                                            回到 <a th:href="@{/toLogin}">登录</a> 界面
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            //邮箱
            let emailInput = document.getElementById('email');
            let sendButton = document.getElementById('send-button');
            sendButton.onclick = function () {
                let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                let checkedResult = emailPattern.test(emailPattern.value);
                if(emailPattern.test(emailInput.value)) {
                    axios({
                        method: 'GET',
                        url: '/user/sendEmail/' + emailInput.value + '/1'
                    }).then(function (response) {
                        response.data.status === 'SUCCESS' ? swal(response.data.message, '', 'success') : swal(response.data.message, '', 'error')//参数：大标题，小标题，图标
                    })
                } else {
                    swal("邮箱不存在", "", "error");
                }
            }

            //校验验证码
            let doCheckElement = document.getElementById('do-check');
            let codeElement = document.getElementById('code');
            doCheckElement.onclick = function () {
                axios({
                    method: 'GET',
                    url: '/user/checkCode/' + codeElement.value + '/' + emailInput.value
                }).then(function (response) {
                    if (response.data.status === 'SUCCESS') {
                        //验证成功后自动跳转到修改密码界面
                        window.location.href = '/toChangePassword/' + emailInput.value;
                    } else {
                        swal('验证码错误', '', 'error');
                    }
                })
            }


        </script>

    </body>
</html>
